<template>
  <section>
    <div class="header">
      <div class="logo">
        <svg-icon icon-class="farm" />
        <div class="name" @click="home">网上农场</div>
      </div>
      <div>
        <el-input
          v-model="searchKey_"
          placeholder="搜索农场"
          @change.native="search"
        >
          <el-button slot="append" icon="el-icon-search" @click.native="search" />
        </el-input>
      </div>
    </div>
    <FarmList
      :search-key="searchKey"
    />
  </section>
</template>

<script>
import FarmList from './components/FarmList'

export default {
  name: 'Farm',
  components: {
    FarmList
  },
  data() {
    return {
      searchKey_: '',
      searchKey: ''
    }
  },
  methods: {
    home() {
      this.$router.push({
        path: '/login'
      })
    },
    search() {
      this.searchKey = this.searchKey_
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  padding:15px 20px;
  display:flex;
  justify-content: space-between;
  box-shadow:0 0 10px rgb(215,215,215);
  z-index:5;
  position:fixed;
  left:0;
  right:0;
  background-color: #fff;
  .logo {
    display:flex;
    font-size:30px;
    color:#409EFF;
    cursor:pointer;
    .name {
      margin-left:10px;
    }
  }
}
</style>
